<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script type="text/javascript" src="js/form.js">
</script>
<meta charset="UTF-8">
    <title>三级联动</title>

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

body{
            font-size: 14px;
        }
        .clsInit{
            width: 436px;
            height: 35px;
            line-height: 35px;
            padding-left: 10px;
        }
        .clsTip{
            padding-top: 5px;
            background-color: #eeeeee;
            display: none;
        }
        .btn{
            border: 1px solid #666666;
            padding: 2px;
            width: 65px;
            float: right;
            margin-top: 6px;
            margin-left: 6px;
        }
* {
  box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
}
body {
  font-family: Arial;
  padding: 10px;
  background: #d6d1d1;
}

/* 头部标题 */
.header {
  padding: 30px;
  text-align: center; 
  background: rgb(231, 224, 224);
  background-image:url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-090923%2Fezaj0sjisrcezaj0sjisrc.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649992205&t=52561bb0fcd809a95e2ba8ec82e0ba32');
  background-position: right bottom, left bottom; 
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建二列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 70%;
}
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 30%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 50%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
  background-image:url('https://img0.baidu.com/it/u=2179798861,1494860581&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=183');
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>周 杰 伦</h1>
  <h2>     Jay Chou</h2>
</div>

<div class="topnav">
  <a href="file:///D:/%E5%88%9B%E5%BB%BA%E7%9A%84%E6%A1%8C%E9%9D%A2%E5%86%85%E5%AE%B9/%E7%BD%91%E9%A1%B5/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86.html">个人简介</a>
  <a href="file:///D:/%E5%88%9B%E5%BB%BA%E7%9A%84%E6%A1%8C%E9%9D%A2%E5%86%85%E5%AE%B9/%E7%BD%91%E9%A1%B5/%E9%9F%B3%E4%B9%90%E4%BD%9C%E5%93%81.html">音乐作品</a>
  <a href="file:///D:/%E5%88%9B%E5%BB%BA%E7%9A%84%E6%A1%8C%E9%9D%A2%E5%86%85%E5%AE%B9/%E7%BD%91%E9%A1%B5/%E6%BC%94%E8%89%BA%E7%BB%8F%E5%8E%86.html">演艺经历</a>
  <a href="file:///D:/%E5%88%9B%E5%BB%BA%E7%9A%84%E6%A1%8C%E9%9D%A2%E5%86%85%E5%AE%B9/%E7%BD%91%E9%A1%B5/%E7%95%99%E8%A8%80%E5%86%8C.html">留言册</a>
  <a href="https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156?fr=aladdin" style="float:right">更多</a>
</div>
<div class="row">
  <div class="card">
    <h1 align="center">留言册</h1>
    <form id="form" name="form1">
      <table border="1" width="630" cellpadding="5" cellspacing="0" align="center" >
        <tr><td>姓名</td><td><input type="text" name="username"/></td></tr>
        <tr><td>年龄</td><td><input type="password" name="age"/></td></tr>
        <tr><td>邮箱</td><td><input type="password" name="email"/></td></tr>
        <tr><td>性 别</td><td>
           <input type="radio" name="gender" value="女">女
           <input type="radio" name="gender" value="男">男
        </td></tr>
        <tr><td>喜欢的歌</td><td>
           <input type="checkbox" name="lang" value="夜曲">夜曲
           <input type="checkbox" name="lang" value="晴天">晴天
           <input type="checkbox" name="lang" value="花海">花海
           <input type="checkbox" name="lang" value="外婆">外婆
           <input type="checkbox" name="lang" value="七里香">七里香
           <input type="checkbox" name="lang" value="我是如此相信">我是如此相信
        </td></tr>
        <tr><td>个人爱好</td><td><select name="hobby" size="4" multiple="miltiple">
           <option value="旅游">旅游</option>
           <option value="运动">运动</option>
           <option value="阅读">阅读</option>
           <option value="上网">上网</option>
           <option value="游戏">游戏</option>
           <option value="音乐">音乐</option>
        </select></td></tr>
        <tr><td>关注你的日期</td><td><select name="time">
           <option value="-1">--请选择日期--</option>
           <option value="2022">2022</option>
           <option value="2021">2021</option>
           <option value="2020">2020</option>
           <option value="2019">2019</option>
           <option value="2018">2018</option>
           <option value="2017">2017</option>
           <option value="2016">2016</option>
           <option value="2015">2015</option>
           <option value="2014">2014</option>
           <option value="2013">2013</option>
           <option value="2012">2012</option>
           <option value="2011">2011</option>
           <option value="2010">2010</option>
           <option value="2009">2009</option>
           <option value="2008">2008</option>
           <option value="2007">2007</option>
           <option value="2006">2006</option>
           <option value="2005">2005</option>
           <option value="2004">2004</option>
           <option value="2003">2003</option>
           <option value="2002">2002</option>
           <option value="2001">2001</option>
           <option value="2000">2000</option>
        </select></td></tr>
        <tr><td>生源地</td><td><select id="sheng">
          <option value="">-请选择-</option><!--先创建三个下拉栏，分别对应 省 市 县-->
      </select>
      
      <select id="shi">
          <option value="">-请选择-</option>
      </select>
      
      <select id="xian">
          <option value="">-请选择-</option>
      </select>
        </td></tr>
        <tr><td>想说的话</td><td><textarea name="info" rows="10" cols="60"></textarea>
         </td></tr>
        <tr><td colspan="2" align="center">
           <input type="button" value="提交" id="regBtn">
           <input type="reset" value="重 置">
        </td></tr>
      </table>
    </form>
</div>
<div class="footer">
  <h2>个人原创  侵权必究</h2>
</div>
<script>
  var osheng=document.getElementById("sheng");
  var oshi=document.getElementById("shi");
  var oxian=document.getElementById("xian");

  var arr_sheng=["陕西省","云南省","四川省","山西省"];<!--创建一个一维数组，存入省的值-->

  var arr_shi=[<!--创建一个二维数组，最外层每一个元素对应省-->
      ["西安市","咸阳市","宝鸡市","渭南市"],<!--数组中的第一个元素内又定义一个数组存的市的值-->
      ["昆明市","大理市","丽江市","西双版纳市"],
      ["乐山市","成都市","大同市","高新市"],
      ["太原市","临汾市","晋州市","运城"]
  ];

  var arr_xian=[<!--创建一个三维数组，最外层每一个元素（对应省）-->
          [<!--数组中定义四个数组（对应市）-->
              ["蓝田县","周至县","户县","高陵县"],["永寿县","彬县","长武县"],["凤翔县","岐山县","扶风县","眉县"],["华县","潼关","大荔","澄城"]
          ],<!--数组中定义两个元素（对应县）-->
          [
              ["富民县","嵩明县","宜良县"],["鹤庆县","剑川县","洱源县","宾川县","祥云县"],["玉龙纳西族自治县","永胜县","华坪县","宁蒗彝族自治县"],["勐海县","勐腊县"]
          ],
          [
              ["犍为县","井研县","夹江县","沐川县"],["双流","金堂","大邑","郫县","新津","浦江"],["阳高县","天镇县","广灵县","灵丘县","浑源县","左云县"],["渝中区","沙坪坝","九龙坡","江北区"]
          ],
          [
              ["清徐县","阳曲县","娄烦县"],["安泽","大宁","浮山","古县","隰县"],["城区","高平市","泽州县","阳城县","沁水县","陵川县"],["芮城县","临猗县","万荣县","闻喜县"]
          ]
  ];

  var  quanju_arr;//创建一个全局对象，用于存储一个中间数组

  function input_arr(arr,event){//封装一个函数，用于向下拉栏中添加元素
      for(var i=0;i<arr.length;i++){//下拉栏内的元素来源于数组中的元素，遍历数组
          var option=new Option(arr[i],i);//创建Option对象（这个O要大写），存入值
          event.appendChild(option);//把option添加到event对象的末尾
      }
  }

  input_arr(arr_sheng,osheng);//调用,给省下拉栏添元素

  osheng.onchange= function () {//给下拉栏绑定事件（当下拉栏元素改变时执行）
      oshi.options.length=1;//当省下拉栏改变时，清空市的下拉栏内元素
      oxian.options.length=1;//当省下拉栏改变时，清空县的下拉栏内元素
      var index=this.value;//每一个option标签都有一个value值索引，获取索引，用于数组中元素的选择
      var arr_shi_next=arr_shi[index];//获取当前选择省的市元素并赋给一个数组
      quanju_arr=arr_xian[index];//获取当前选择省中市的县元素并赋给定义的中间数组
      input_arr(arr_shi_next,oshi);//调用,给市下拉栏添元素
  }

  oshi.onchange= function () {
      oxian.options.length=1;
      var index=this.value;
      var arr_xian_next=quanju_arr[index];
      input_arr(arr_xian_next,oxian);//调用,给县下拉栏添元素
  }
</script>
</body>
</html>